<template>
  <aside class="admin-sidebar">
    <!-- 侧边栏头部 -->
    <div class="sidebar-header text-center py-4">
      <div class="logo-container mb-3">
        <img src="@/assets/images/logo.jpg" alt="校园信息管理" class="logo-image" />
      </div>
      <h5 class="sidebar-title fw-bold mb-0">校园信息管理</h5>
      <small class="text-muted">Administration Panel</small>
    </div>

    <!-- 导航菜单 -->
    <nav class="sidebar-nav">
      <ul class="nav flex-column">
        <!-- 仪表盘 -->
        <li class="nav-item">
          <router-link 
            to="/admin" 
            class="nav-link"
            :class="{ active: $route.path === '/admin' }"
          >
            <i class="bi bi-speedometer2 me-3"></i>
            <span class="nav-text">仪表盘</span>
            <span class="nav-badge badge bg-primary rounded-pill ms-auto">实时</span>
          </router-link>
        </li>

        <!-- 用户管理 -->
        <li class="nav-item">
          <a 
            class="nav-link dropdown-toggle" 
            href="javascript:void(0)"
            role="button"
            :class="{ active: isActive(['users']) }"
            @click="toggleCollapse('userCollapse')"
          >
            <i class="bi bi-people me-3"></i>
            <span class="nav-text">用户管理</span>
            <i class="bi bi-chevron-down dropdown-arrow" :class="{ rotated: isCollapseOpen('userCollapse') }"></i>
          </a>
          <div class="collapse" :class="{ show: isCollapseOpen('userCollapse') }" id="userCollapse">
            <ul class="sub-nav list-unstyled">
              <li>
                <router-link 
                  to="/admin/users" 
                  class="sub-nav-link"
                  :class="{ active: $route.path === '/admin/users' }"
                >
                  <i class="bi bi-list-ul me-2"></i>
                  用户列表
                </router-link>
              </li>
              <li>
                <router-link 
                  to="/admin/users/audit" 
                  class="sub-nav-link"
                  :class="{ active: $route.path === '/admin/users/audit' }"
                >
                  <i class="bi bi-check-circle me-2"></i>
                  用户审核
                  <span class="badge bg-warning rounded-pill ms-auto">5</span>
                </router-link>
              </li>
              <li>
                <router-link 
                  to="/admin/users/roles" 
                  class="sub-nav-link"
                  :class="{ active: $route.path === '/admin/users/roles' }"
                >
                  <i class="bi bi-shield-check me-2"></i>
                  权限管理
                </router-link>
              </li>
            </ul>
          </div>
        </li>

        <!-- 内容管理 -->
        <li class="nav-item">
          <a 
            class="nav-link dropdown-toggle" 
            href="javascript:void(0)"
            role="button"
            :class="{ active: isActive(['posts', 'categories']) }"
            @click="toggleCollapse('contentCollapse')"
          >
            <i class="bi bi-file-earmark-text me-3"></i>
            <span class="nav-text">帖子管理</span>
            <i class="bi bi-chevron-down dropdown-arrow" :class="{ rotated: isCollapseOpen('contentCollapse') }"></i>
          </a>
          <div class="collapse" :class="{ show: isCollapseOpen('contentCollapse') }" id="contentCollapse">
            <ul class="sub-nav list-unstyled">
              <li>
                <router-link 
                  to="/admin/posts" 
                  class="sub-nav-link"
                  :class="{ active: $route.path === '/admin/posts' }"
                >
                  <i class="bi bi-newspaper me-2"></i>
                  帖子列表
                </router-link>
              </li>
              <li>
                <router-link 
                  to="/admin/posts/categories" 
                  class="sub-nav-link"
                  :class="{ active: $route.path === '/admin/posts/categories' }"
                >
                  <i class="bi bi-clipboard-check me-2"></i>
                  版块管理
                </router-link>
              </li>
              <li>
                <router-link 
                  to="/admin/posts/itemTypes" 
                  class="sub-nav-link"
                  :class="{ active: $route.path === '/admin/posts/itemTypes' }"
                >
                  <i class="bi bi-grid me-2"></i>
                  分类管理
                </router-link>
              </li>
            </ul>
          </div>
        </li>

        <!-- 互动管理 -->
        <li class="nav-item">
          <a 
            class="nav-link dropdown-toggle" 
            href="javascript:void(0)"
            role="button"
            :class="{ active: isActive(['comments', 'messages']) }"
            @click="toggleCollapse('interactionCollapse')"
          >
            <i class="bi bi-chat-dots me-3"></i>
            <span class="nav-text">互动管理</span>
            <i class="bi bi-chevron-down dropdown-arrow" :class="{ rotated: isCollapseOpen('interactionCollapse') }"></i>
          </a>
          <div class="collapse" :class="{ show: isCollapseOpen('interactionCollapse') }" id="interactionCollapse">
            <ul class="sub-nav list-unstyled">
              <li>
                <router-link 
                  to="/admin/posts/comments" 
                  class="sub-nav-link"
                  :class="{ active: $route.path === '/admin/posts/comments' }"
                >
                  <i class="bi bi-chat-square-text me-2"></i>
                  评论管理
                </router-link>
              </li>
              <li>
                <router-link 
                  to="/admin/messages" 
                  class="sub-nav-link"
                  :class="{ active: $route.path === '/admin/messages' }"
                >
                  <i class="bi bi-envelope me-2"></i>
                  站内信
                </router-link>
              </li>
            </ul>
          </div>
        </li>

        <!-- 系统设置 -->
        <li class="nav-item">
          <a 
            class="nav-link dropdown-toggle" 
            href="javascript:void(0)"
            role="button"
            :class="{ active: isActive(['settings']) }"
            @click="toggleCollapse('systemCollapse')"
          >
            <i class="bi bi-gear me-3"></i>
            <span class="nav-text">系统设置</span>
            <i class="bi bi-chevron-down dropdown-arrow" :class="{ rotated: isCollapseOpen('systemCollapse') }"></i>
          </a>
          <div class="collapse" :class="{ show: isCollapseOpen('systemCollapse') }" id="systemCollapse">
            <ul class="sub-nav list-unstyled">
              <li>
                <router-link 
                  to="/admin/settings/basic" 
                  class="sub-nav-link"
                  :class="{ active: $route.path === '/admin/settings/basic' }"
                >
                  <i class="bi bi-sliders me-2"></i>
                  基本设置
                </router-link>
              </li>
              <li>
                <router-link 
                  to="/admin/settings/sensitive" 
                  class="sub-nav-link"
                  :class="{ active: $route.path === '/admin/settings/sensitive' }"
                >
                  <i class="bi bi-exclamation-triangle me-2"></i>
                  敏感词过滤
                </router-link>
              </li>
              <li>
                <router-link 
                  to="/admin/settings/verification" 
                  class="sub-nav-link"
                  :class="{ active: $route.path === '/admin/settings/verification' }"
                >
                  <i class="bi bi-person-check me-2"></i>
                  身份验证
                </router-link>
              </li>
            </ul>
          </div>
        </li>

        <!-- 数据统计 -->
        <li class="nav-item">
          <router-link 
            to="/admin/statistics" 
            class="nav-link"
            :class="{ active: $route.path === '/admin/statistics' }"
          >
            <i class="bi bi-bar-chart me-3"></i>
            <span class="nav-text">数据统计</span>
          </router-link>
        </li>

        <!-- 操作日志 -->
        <li class="nav-item">
          <router-link 
            to="/admin/logs" 
            class="nav-link"
            :class="{ active: $route.path === '/admin/logs' }"
          >
            <i class="bi bi-clock-history me-3"></i>
            <span class="nav-text">操作日志</span>
          </router-link>
        </li>
      </ul>
    </nav>

    <!-- 底部信息 -->
    <div class="sidebar-footer mt-auto p-3 text-center">
      <div class="user-info mb-2">
        <img src="" class="rounded-circle me-2" alt="管理员" width="32" height="32">
        <span class="text-muted small">管理员</span>
      </div>
      <button class="btn btn-outline-light btn-sm w-100">
        <i class="bi bi-box-arrow-right me-1"></i>
        退出登录
      </button>
    </div>
  </aside>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { ref } from 'vue'

const route = useRoute()
const openCollapse = ref('')

// 检查当前路由是否激活
const isActive = (paths) => {
  return paths.some(path => {
    // 精确匹配路径开头，避免部分匹配导致的错误激活
    if (path === 'posts') {
      // 对于帖子管理，需要排除其他包含posts但不属于帖子管理的路径
      return route.path.startsWith('/admin/posts') && 
             !route.path.startsWith('/admin/posts/comments');
    } else if (path === 'comments' || path === 'messages') {
      // 对于评论和消息，检查是否在互动管理路径下
      return route.path.includes('/' + path);
    } else {
      return route.path.includes('/' + path);
    }
  })
}

// 切换折叠菜单状态
const toggleCollapse = (collapseId) => {
  if (openCollapse.value === collapseId) {
    // 如果当前菜单已打开，则关闭它
    openCollapse.value = ''
  } else {
    // 否则打开当前菜单
    openCollapse.value = collapseId
  }
}

// 检查指定折叠菜单是否打开
const isCollapseOpen = (collapseId) => {
  return openCollapse.value === collapseId
}
</script>

<style scoped>
.admin-sidebar {
  width: 280px;
  height: 100%;
  background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
  color: white;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1000;
  box-shadow: 3px 0 15px rgba(0, 0, 0, 0.1);
}

/* 侧边栏头部 */
.sidebar-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-container {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebar-title {
  color: white;
  font-size: 1.1rem;
}

/* 导航菜单 */
.sidebar-nav {
  flex: 1;
  padding: 1rem 0;
}

.nav-item {
  margin-bottom: 0.25rem;
}

.nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
  padding: 0.75rem 1.5rem;
  border: none;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  position: relative;
}

.nav-link:hover {
  color: white !important;
  background: rgba(255, 255, 255, 0.1);
  border-left: 4px solid #3498db;
}

.nav-link.active {
  color: white !important;
  background: rgba(255, 255, 255, 0.15);
  border-left: 4px solid #e74c3c;
  font-weight: 600;
}

.nav-text {
  flex: 1;
}

.nav-badge {
  font-size: 0.7rem;
}

/* 下拉菜单箭头 */
.dropdown-arrow {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.dropdown-arrow.rotated {
  transform: rotate(180deg);
}

/* 子导航 */
.sub-nav {
  background: rgba(0, 0, 0, 0.2);
  margin: 0.25rem 0;
  border-left: 3px solid #3498db;
}

.sub-nav-link {
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 0.6rem 1.5rem 0.6rem 3rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.sub-nav-link:hover {
  color: white !important;
  background: rgba(255, 255, 255, 0.1);
}

.sub-nav-link.active {
  color: white !important;
  background: rgba(52, 152, 219, 0.3);
  font-weight: 500;
}

/* 侧边栏底部 */
.sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.1);
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .admin-sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
}

/* 滚动条样式 */
.admin-sidebar::-webkit-scrollbar {
  width: 4px;
}

.admin-sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.admin-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.admin-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
</style>